<template>
  <div class="bg-zinc-200 h-screen flex justify-center items-center">
    <div
      class="bg-white w-[600px] px-4 pt-3 border border-zinc-300 rounded-lg shadow-md"
    >
      <div class="font-bold text-center mb-2">信贷管理系统</div>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item prop="account">
          <el-input
            clearable
            prefix-icon="el-icon-user-solid"
            v-model="form.account"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            clearable
            show-password
            prefix-icon="el-icon-s-order"
            type="password"
            v-model="form.password"
          ></el-input>
        </el-form-item>
        <el-form-item class="w-full flex justify-center">
          <el-button class="w-full" type="primary" @click="doLogin"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/user'

export default {
  data () {
    return {
      form: {
        account: 'admin',
        password: 'approve123456.'
      },
      rules: {
        account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    async doLogin () {
      const res = await login(this.form)
      this.$store.commit('user/setToken', { token: res.data.data.token })
      const redirectUrl = this.$route.query.redirect
      await this.$router.push({ path: redirectUrl || '/' })
    }
  }
}
</script>

<style lang="scss" scoped></style>
